<template>
	<view class="jk-page-container bg">
		<jkSearchBar
            :search-val.sync="searchParams.productNameOrCode"
            :searchLeftItemName="searchParams.workshopName"
			:searchRightItemName="searchParams.processName"
            search-right-item-no-data-name="日期"
            placeholder="品种、批号、客户"
            @search="onSearchBtn"
			@search-left-item="selectWorkshopPopupOptionState = true"
            @search-right-item="selectProcessPopupOptionState = true"
        ></jkSearchBar>
		<view class="column-list-container" style="padding-bottom: 84px;box-sizing: border-box;">
			<view v-for="(item) in tableData" :key="item.id" class="column-list-item">
				<view class="column-list-item-default flex-between-center">
					<view class="column-list-item-title">{{ item.productName || '' }}</view>
					<view class="column-list-item-sub-title color1">{{ item.outInNumber }}</view>
				</view>
                <view class="column-list-item-default column-list-item-sub-title">批号：{{ item.batchCode || '' }}</view>
				<view class="column-list-item-default column-list-item-sub-title">分类：{{ item.categoryName || '' }}</view>
                <view style="background: #f8f8f9;padding: 4rpx 12rpx;border-radius: 12rpx;">
                    <u-row>
                        <u-col :span="6">
                            <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">纸管：{{ item.paperTubeList ? item.paperTubeList.map(x => x.name).join() : '无' }}</view>
                        </u-col>
                        <u-col :span="6">
                            <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">扎线：{{ item.bundleList ? item.bundleList.map(x => x.name).join() : '无' }}</view>
                        </u-col>
                    </u-row>
                    <u-row>
                        <u-col :span="6">
                            <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">外袋：{{ item.outerBagList ? item.outerBagList.map(x => x.name).join() : '无' }}</view>
                        </u-col>
                        <u-col :span="6">
                            <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">内袋：{{ item.innerBagList ? item.innerBagList.map(x => x.name).join() : '无' }}</view>
                        </u-col>
                    </u-row>
                    <u-row>
                        <u-col :span="6">
                            <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">人员：{{ item.creatorName || '无' }}</view>
                        </u-col>
                        <u-col :span="6">
                            <view class="column-list-item-default column-list-item-sub-title text-ellipsis" style="font-size: 24rpx;margin: 4rpx 0;">时间：{{ item.createTime || '无' }}</view>
                        </u-col>
                    </u-row>
                </view>
				<!--<view style="font-weight: 300;">
					<u-button @click="onToOpenBtn(item)" type="text" size="normal">开台</u-button>
				</view>-->
			</view>
			<jk-no-more :pageNo="searchParams.pageNo" :show="isNoMore" />
            <view style="width: 100%;position: fixed;left: 0;bottom: 0;height: 84px;background: #fff;display: flex;justify-content: center;align-items: center;padding: 0 32rpx;box-sizing: border-box;border-top: solid 1px #dcdee2;">
                <u-button @click="onToOpenBtn" type="primary" style="width: 100%;" size="large">开始称重</u-button>
            </view>
		</view>
        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <jkPopupOption
            :value="searchParams.processCode"
            :show="selectProcessPopupOptionState"
            :optionList="processList"
            :option-id-key-name="'code'"
            @visible-change="(e) => selectProcessPopupOptionState = e"
            @confirm="onConfirmOfSelectProcess"
        ></jkPopupOption>
	</view>
</template>

<script>
	import {
        productionStockRecordPage,
		spinProcessPage,
	} from "../../../api";
	import {
		isLastPage,
		pageConfig,
		showLoading
	} from "../../../utils/jk-utils";
	import loadingMore from '../../../mixins/loading-more';
	import jkNoMore from "../../../jk-components/jk-no-more";
	import jkSearchBar from "../../../jk-components/jk-search-bar";
    import jkPopupOption from "../../../jk-components/jk-popup-option";
	export default {
		mixins: [loadingMore],
		components: {
            jkPopupOption,
            jkNoMore,
			jkSearchBar,
		},
		data() {
			return {
				apiConfig: {
					list: productionStockRecordPage
				},
				searchParams: {
					pageNo: 1,
					pageSize: pageConfig.pageSize,
					totalCount: pageConfig.totalCount,
					productNameOrCode: '',
					workshopId: null,
					workshopName: '',
                    type: 1
				},
                selectWorkshopPopupOptionState: false,
                selectProcessPopupOptionState: false,
				tableData: [],
				workshopList: [],
				processList: []
			}
		},
		onLoad(e) {
            console.log('擦书', e)
		    this.$set(this.searchParams, 'type', e.state);
		},
		onShow() {
            if (!this.searchParams.workshopId) {
                this.$set(this.searchParams, 'workshopId', getApp().globalData.defaultWorkshop.id);
                this.$set(this.searchParams, 'workshopName', getApp().globalData.defaultWorkshop.name);
            }
            this.workshopList = getApp().globalData.defaultWorkshop.list;
            this.processList = getApp().globalData.defaultProcess.list;
			this.getDependentData();
		},
		methods: {
            onConfirmOfSelectProcess(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'processCode', item.code);
                this.$set(this.searchParams, 'processName', item.name);
                this.selectProcessPopupOptionState = false;
                this.getListRequest();
            },
            onConfirmOfSelectWorkshop(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'workshopId', item.id);
                this.$set(this.searchParams, 'workshopName', item.name);
                this.selectWorkshopPopupOptionState = false;
                this.getListRequest();
            },
			onClearOfSearchIpt() {
				this.$set(this.searchParams, 'productNameOrCode', '');
				this.onSearchBtn();
			},
			onToOpenBtn() {
				uni.navigateTo({
					url: `/pages/production/electronicWeighing/toInput?type=` + this.searchParams.type
				})
			},
			onSearchBtn(e) {
				this.tableData = [];
				this.$set(this.searchParams, 'productNameOrCode', e);
				this.getListRequest();
			},
			getProcessListRequest() {
				return spinProcessPage({
					auditState: 1
				}).then(res => {
					if (res.data.status === 200) {
						let item = res.data.res.find(x => x.code.toUpperCase() === 'XS');
						if (item) {
							this.$set(this.searchParams, 'processCode', item.code);
							this.$set(this.searchParams, 'processName', item.name);
						}
						this.processList = res.data.res;
					}
				});
			},
			async getDependentData() {
				showLoading(true);
				this.searchParams.pageNo = 1;
				if (this.searchParams.workshopId) await this.getListRequest();
				showLoading(false);
			},
			getListRequest() {
				// if (this.searchParams.workshopId) {
					showLoading(true);
                    this.searchParams.pageNo = 1;
                    let params = JSON.parse(JSON.stringify(this.searchParams));
                    delete params.workshopName;
                    delete params.workshopCode;
                    delete params.processName;
                    delete params.totalCount;
					return this.apiConfig.list(params).then(res => {
						showLoading(false);
						if (res.data.status === 200) {
							this.$set(this.searchParams, 'totalCount', res.data.count);
							this.tableData = res.data.res;
							this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
						}
					})
				// }
			}
		},
		onReachBottom() {
			this.getMore();
		}
	}
</script>

<style lang="scss" scoped>
</style>
